<template>
  <div class="jst_main">
    <div class="jst_head">
      <div class="jst-filter">
        <div style="line-height: 24px;">
          <div class="show-title">Hi {{ currnetUserName }}</div>
          <div class="show-des">
            Welcome back to hightrast backend management
          </div>
        </div>
        <!-- <div style="display: flex;">
          <div class="search">
            <el-input
              placeholder="Search Name..."
              size="small"
              prefix-icon="el-icon-search"
              v-model="form.userName"
              @keyup.enter="getPageInfo"
              @keyup.native.enter="getPageInfo()"
            >
            </el-input>
          </div>
        </div> -->
      </div>
      <div class="jst_content">
        <div class="add-filter">
          <el-button
            @click="openFilter(null)"
            type="primary"
            icon="el-icon-plus"
            class="Add"
            >Add Filter</el-button
          >
          <div class="filter-tags">
            <el-tag
              type="warning"
              closable
              style="margin-left: 12px;"
              @close="closeTag(item)"
              @click="openFilter(item)"
              v-for="(item, index) in filterVals"
              :key="item.label"
            >
              <span :title="item.label + ':' + item.labelValue">
                {{ item.label }}:{{ item.labelValue }}
              </span>
            </el-tag>
          </div>
        </div>

        <el-table
          class="table-detail"
          stripe
          ref="tableRef"
          :height="pageHeight"
          :header-cell-style="{
            background: '#FFFDF4',
            color: '#26497e',
            'font-szie': '12px'
          }"
          :data="pageTicket"
          :show-summary="true"
          :summary-method="summaryMethod"
          @row-dblclick="rowDbClick"
          @sort-change="sortChange"
        >
          <!-- <el-table-column prop="id" label="No" align="center" header-align="center" /> -->
          <el-table-column
            prop="userName"
            label="Name"
            width="100%"
            align="center"
            header-align="center"
            min-width="140"
          />
          <el-table-column
            prop="avatar"
            label="Photo"
            align="center"
            header-align="center"
            min-width="140"
          >
            <template slot-scope="scope">
              <!-- <img :src="scope.row.image" :min-width="70" /> -->
              <el-image
                style="width: 70px; height: 70px;border-radius: 15px;"
                :src="scope.row.avatar"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            prop="email"
            label="Email Address"
            align="center"
            header-align="center"
            min-width="140"
          />
          <el-table-column
            prop="vendor"
            label="Brand"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="commissonPay"
            label="Payback"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="140"
          />
          <el-table-column
            prop="bankAccount"
            label="Payment method"
            align="center"
            header-align="center"
            :sortable="'custom'"
            :render-header="renderHeader"
            min-width="140"
          >
            <template slot-scope="scope">
              <div style="font-weight: bold;">
                {{
                  scope.row.bankType == null ||
                  scope.row.bankType == "" ||
                  scope.row.bankType == ""
                    ? ""
                    : scope.row.bankType == 1
                    ? "PayPal"
                    : "Wire Transfer"
                }}
              </div>
              <div style="color: #898989;font-size: 10px;">
                {{ scope.row.bankAccount }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="roleId"
            label="Role"
            align="center"
            header-align="center"
            min-width="140"
          >
            <template #default="scope">
              <el-select
                style="width: 130px;margin-left:5px;"
                v-model="scope.row.roleId"
                filterable
                placeholder="请选择"
                @change="changeRole(scope.row.roleId, scope.row.id)"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            prop="tolalDiscount"
            label="Operate"
            align="center"
            header-align="center"
            min-width="140"
          >
            <template #default="scope">
              <el-button
                size="small"
                type="danger"
                round
                @click="handleDelete(scope.$index, scope.row)"
                >Delete</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!--分页-->
        <el-row>
          <el-col style="text-align:right;margin-top: 20px">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="form.page"
              :page-sizes="[5, 10, 50, 100]"
              :page-size="form.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-row>

        <el-dialog
          title="Add Filter"
          :visible.sync="dialogFormVisible"
          width="45%"
          style="margin: 0 auto;"
        >
          <div style="height: 50vh" class="dialog-content">
            <div class="left-list">
              <div
                v-for="(item, index) in filters"
                :key="index"
                class="filter-item"
                :class="filterIndex == index ? 'filter-active' : ''"
                @click="filter(item, index)"
              >
                {{ item.label }}
              </div>
            </div>
            <div class="right-info">
              <div
                v-if="
                  filterVal == 'Name' ||
                    filterVal == 'Brand' ||
                    filterVal == 'Email Address' ||
                    filterVal == 'Payment Method' ||
                    filterVal == 'Role'
                "
              >
                <div class="designer-list" v-if="filterVal == 'Name'">
                  <div class="filter-search">
                    <el-input
                      placeholder="Search..."
                      size="small"
                      prefix-icon="el-icon-search"
                      v-model="userVal"
                      @input="inputVal"
                    >
                    </el-input>
                  </div>
                  <div
                    v-for="(item, index) in userList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item.id
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item.userName }}
                  </div>
                </div>

                <div class="designer-list" v-if="filterVal == 'Email Address'">
                  <div class="filter-search">
                    <el-input
                      placeholder="Search..."
                      size="small"
                      prefix-icon="el-icon-search"
                      v-model="emailVal"
                      @input="inputVal"
                    >
                    </el-input>
                  </div>
                  <div
                    v-for="(item, index) in userEmailList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item }}
                  </div>
                </div>

                <div class="designer-list" v-if="filterVal == 'Brand'">
                  <div class="filter-search">
                    <el-input
                      placeholder="Search..."
                      size="small"
                      prefix-icon="el-icon-search"
                      v-model="brandVal"
                      @input="inputVal"
                    >
                    </el-input>
                  </div>
                  <div
                    v-for="(item, index) in brandList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item.vendorId
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item.vendor }}
                  </div>
                </div>

                <div class="designer-list" v-if="filterVal == 'Payment Method'">
                  <div
                    v-for="(item, index) in paymentMethodList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item.type
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item.name }}
                  </div>
                </div>

                <div class="designer-list" v-if="filterVal == 'Role'">
                  <div
                    v-for="(item, index) in roleList"
                    :key="index"
                    class="designer-item"
                    @click="designer(item, index)"
                    :class="
                      filters[filterIndex].value == item.id
                        ? 'designer-active'
                        : ''
                    "
                  >
                    {{ item.roleName }}
                  </div>
                </div>
              </div>
              <div v-else>
                <el-input
                  style="width: 130px;"
                  placeholder="Minimum value"
                  size="small"
                  v-model="minVal"
                  @input="inputMin"
                ></el-input>
                <span style="margin: 0 8px;">-</span>
                <el-input
                  style="width: 130px;"
                  placeholder="Maximum value"
                  size="small"
                  v-model="maxVal"
                  @input="inputMax"
                ></el-input>
              </div>
            </div>
          </div>

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="warning" @click="confirm">Confirm</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getUserList,
  getRoleList,
  updateUserRole,
  deleteUserById,
  getUserInfo,
  queryUserEmail
} from "../../api/userService";

import { queryVendorList } from "@/api/vendorService";
import Decimal from "decimal.js";
export default {
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      pageHeight: 0,
      total: 0, //总数据条数
      pageSize: 10, //每页显示多少行数据 默认设置为10
      filterIndex: 0,
      maxVal: "",
      minVal: "",
      filterVal: "Name",
      designerVal: "",
      userVal: "", // 筛选弹框右侧用户搜索输入
      emailVal: "", //筛选弹框右侧用户邮件搜索输入
      brandVal: "", // 筛选弹框右侧品牌搜索输入
      pageTicket: [],
      filters: [
        {
          label: "Name", //展示名
          value: "", // 选中数据、输入模糊数据
          maxVal: "", // 输入最大值
          minVal: "", // 输入最小值
          startProp: "userId", // 查询参数名开始字段名，也包括输入和选中字段名
          endProp: "", // 输入结束字段名
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Email Address",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "email",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Brand",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "vendorId",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Payback",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "startPayBack",
          endProp: "endPayBack",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Payment Method",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "bankType",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        },
        {
          label: "Role",
          value: "",
          maxVal: "",
          minVal: "",
          startProp: "roleId",
          endProp: "",
          labelValue: "",
          labelIndex: "",
          selectName: ""
        }
      ],
      filterVals: [], // 筛选的总类型数组
      userList: [], // 用户列表数据
      tempUserList: [], // 筛选的用户列表数据
      userEmailList: [], // 邮件列表数据
      tempUserEmailList: [], // 筛选的邮件列表数据
      brandList: [], // 品牌列表数据
      tempBrandList: [], // 筛选的品牌列表数据
      roleList: [], // 角色列表数据
      paymentMethodList: [
        { name: "PayPal", type: 1 },
        { name: "Wire Transfer", type: 2 }
      ], // 支付方式列表数据
      form: {
        userId: null,
        userName: "",
        asc: true,
        bankType: null,
        email: "",
        orderField: "",
        page: 1,
        pageSize: 10,
        roleId: null,
        roleName: "",
        vendor: "",
        vendorId: null
      },
      options: [],
      userRoleInfo: {},
      currnetUserName: "",
      windowWidth: window.innerWidth,
      windowHeight: window.innerHeight
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.updatePageHeight();
      this.filters.forEach((item, index) => {
        item.labelIndex = index;
      });
    });
    // 监听窗口大小变化事件
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    // 组件销毁前，移除窗口大小变化事件的监听，避免内存泄漏
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    handleResize() {
      // 更新窗口宽度和高度的状态
      this.windowWidth = window.innerWidth;
      this.windowHeight = window.innerHeight;
      // 可以在这里添加根据宽高判断的逻辑
      if (this.windowWidth < 768) {
        console.log("当前是手机端屏幕");
      } else {
        console.log("当前是桌面端屏幕");
      }
      this.updatePageHeight();
    },
    designer(item) {
      switch (this.filterVal) {
        case "Name":
          this.filters[this.filterIndex].value = item.id;
          this.filters[this.filterIndex].selectName = item.userName;
          break;
        case "Email Address":
          this.filters[this.filterIndex].value = item;
          this.filters[this.filterIndex].selectName = item;
          break;
        case "Brand":
          this.filters[this.filterIndex].value = item.vendorId;
          this.filters[this.filterIndex].selectName = item.vendor;
          break;
        case "Payment Method":
          this.filters[this.filterIndex].value = item.type;
          this.filters[this.filterIndex].selectName = item.name;
          break;
        case "Role":
          this.filters[this.filterIndex].value = item.id;
          this.filters[this.filterIndex].selectName = item.roleName;
          break;
        default:
          break;
      }
    },
    closeTag(item) {
      this.filterVals = this.filterVals.filter(c => {
        if (c.label == item.label) {
          this.form[c.startProp] = null;
          this.form[c.endProp] = null;
        }
        return c.label != item.label;
      });
      this.form.page = 1;
      this.getPageInfo();
    },
    // 筛选弹框中最小项输入事件
    inputMin(val) {
      this.filters[this.filterIndex].minVal = val;
    },
    // 筛选弹框中最大项输入事件
    inputMax(val) {
      this.filters[this.filterIndex].maxVal = val;
    },
    // 筛选弹框项中输入搜索事件
    inputVal(val) {
      switch (this.filterVal) {
        case "Name":
          if (val) {
            this.userList = this.tempUserList.filter(array =>
              array.userName.match(val)
            );
          } else {
            this.userList = this.tempUserList;
          }
          break;
        case "Email Address":
          if (val) {
            this.userEmailList = this.tempUserEmailList.filter(array =>
              array.match(val)
            );
          } else {
            this.userEmailList = this.tempUserEmailList;
          }
          break;
        case "Brand":
          if (val) {
            this.brandList = this.tempBrandList.filter(array =>
              array.match(val)
            );
          } else {
            this.brandList = this.tempBrandList;
          }
          break;
        default:
          break;
      }
    },
    confirm() {
      this.dialogFormVisible = false;
      this.filterVals = this.filters.filter(c => {
        if (c.maxVal) {
          this.form[c.startProp] = c.minVal;
          this.form[c.endProp] = c.maxVal;
          c.labelValue = c.minVal + "-" + c.maxVal;
        }
        if (c.value) {
          if (
            c.label === "Name" ||
            c.label === "Email Address" ||
            c.label === "Brand" ||
            c.label === "Payment Method" ||
            c.label === "Role"
          ) {
            if (c.label === "Name") {
              c.labelValue = c.selectName ? c.selectName : this.userVal;
            } else if (c.label === "Email Address") {
              c.labelValue = c.selectName ? c.selectName : this.emailVal;
            } else if (c.label === "Brand") {
              c.labelValue = c.selectName ? c.selectName : this.brandVal;
            } else if (c.label === "Payment Method") {
              c.labelValue = c.selectName;
            } else if (c.label === "Role") {
              c.labelValue = c.selectName;
            }
          } else {
            c.labelValue = c.value;
          }
          this.form[c.startProp] = c.value;
        }
        return c.value || c.maxVal;
      });
      this.form.page = 1;
      this.getPageInfo();
    },
    filter(item, index) {
      this.filterIndex = index;
      this.filterVal = item.label;
      this.maxVal = this.filters[this.filterIndex].maxVal;
      this.minVal = this.filters[this.filterIndex].minVal;
    },
    // 筛选弹框弹出事件
    openFilter(flItem) {
      if (flItem) {
        this.filterIndex = flItem.labelIndex;
        this.filterVal = flItem.label;
      }
      this.filters.forEach((item, index) => {
        let val = this.filterVals.find(c => c.label == item.label);
        if (val) {
          item = val;
        } else {
          item.maxVal = "";
          item.minVal = "";
          item.value = "";
        }
      });
      this.maxVal = this.filters[this.filterIndex].maxVal;
      this.minVal = this.filters[this.filterIndex].minVal;
      // this.searchVal = this.filters[this.filterIndex].value;
      // 这一句一定要在最后
      this.$nextTick(() => {
        this.dialogFormVisible = true;
      });
    },
    updatePageHeight() {
      // const pageHeight = window.innerHeight;
      this.pageHeight = this.windowHeight - 240;
    },
    handleDelete(index, row) {
      this.$confirm(this.$t("home.userDeleteTip"), "", {
        confirmButtonText: "Delete",
        cancelButtonText: "Cancel",
        type: "error",
        center: true,
        roundButton: true
        // cancelButtonClass: "cancel-button-class",
        // confirmButtonClass: "confirm-button-class"
      }).then(async () => {
        const res = await deleteUserById(row.id);
        res.code === 200
          ? this.$message.success(res.msg)
          : this.$message.error(res.msg);
        this.getPageInfo();
        // this.$message({
        //   type: 'success',
        //   message: this.$t('home.operationSuccess'),
        // });
      });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    renderHeader(h, { column, $index }) {
      if (column.order === "ascending") {
        return (
          <div>
            <span>{column.label}</span>
            <i class="el-icon-sort-up"></i>
          </div>
        );
      } else if (column.order === "descending") {
        return (
          <div>
            <span>{column.label}</span>
            <i class="el-icon-sort-down"></i>
          </div>
        );
      } else {
        return (
          <div>
            <span>{column.label}</span>
            <i class="el-icon-sort"></i>
          </div>
        );
      }
    },
    sortChange(column, prop, order) {
      console.log(column, prop, order);
      if (column.order == null) {
        this.form.asc = null;
      } else if (column.order === "ascending") {
        this.form.asc = true;
      } else if (column.order === "descending") {
        this.form.asc = false;
      }
      this.form.page = 1;
      this.form.orderField = column.prop;
      this.getPageInfo();
    },
    // 获取当前页的数据信息
    async getPageInfo() {
      const res = await getUserList(this.form);
      if (res.code === 200) {
        this.pageTicket = res.data.records;
        this.total = res.data.total;
        // this.$message.success(this.$t("home.operationSuccess"));
      } else {
        this.$message.error(res.msg);
      }
      this.$nextTick(() => {
        this.$refs.tableRef.doLayout();
      });
    },
    //分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      //修改当前每页的数据行数
      this.form.pageSize = size;
      //数据重新分页
      this.getPageInfo();
    },
    //调整当前的页码
    handleCurrentChange(pageNumber) {
      //修改当前的页码
      this.form.page = pageNumber;
      //数据重新分页
      this.getPageInfo();
    },

    summaryMethod({ columns, data }) {
      const sums = [];
      const summaryColumns = ["commissonPay"];
      columns.forEach((column, index) => {
        if (summaryColumns.includes(column.property)) {
          let total = new Decimal(0);
          data.forEach(row => {
            total = total.add(new Decimal(row[column.property] || 0));
          });
          sums.push(Number(total.toFixed(2)));
        } else {
          sums.push("");
        }
      });
      return sums;
      // const sums = [];
      // columns.forEach((column, index) => {
      //   if (column.property === "commissonPay") {
      //     const total = data.reduce(
      //       (sum, row) => sum + Number(row.commissonPay),
      //       0
      //     );
      //     sums.push(total); // Calculate total for salesQuantity
      //   } else {
      //     sums.push("");
      //   }
      // });
      // return sums;
    },
    rowDbClick(row, event, column) {
      var routerName = "";
      if (!row.roleName) {
        this.$message({
          type: "error",
          message: this.$t("home.noRole")
        });
        return;
      }
      // 登录的账号角色是管理员且当前点击的账号角色是管理员，则跳转到personInformation页面
      if (this.userRoleInfo.roleType === 1 && row.roleType === 1) {
        routerName = "personInformation";
      }
      // 登录的账号角色是管理员且当前点击的账号角色是设计师，则跳转到adminInformation页面
      if (this.userRoleInfo.roleType === 1 && row.roleType === 2) {
        routerName = "adminInformation";
      }
      this.$router.push({
        name: routerName,
        params: { id: row.id, vendorId: row.vendorId ? row.vendorId : "" }
      });
    },
    async getRoleInfo() {
      await getRoleList({ roleName: "", roleId: null }).then(res => {
        if (res.code === 200) {
          this.options = res.data.map(item => {
            return {
              value: item.id,
              label: item.roleName
            };
          });
          this.roleList = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async changeRole(roleId, userId) {
      // 通过roleId在options里面查找roleName
      var roleName = this.options.find(item => item.value === roleId).label;
      const res = await updateUserRole({
        roleId: roleId,
        userId: userId,
        roleName: roleName
      });
      res.code === 200
        ? this.$message.success(res.msg)
        : this.$message.error(res.msg);
      this.getPageInfo();
    },
    async getUserInfoByToken() {
      const res = await getUserInfo();
      if (res.code === 200) {
        this.userRoleInfo = res.data.userRole;
        this.currnetUserName = res.data.userName;
      } else {
        this.$message.error(res.msg);
      }
    },
    async getVendorList() {
      await queryVendorList().then(res => {
        if (res.code === 200) {
          this.brandList = res.data;
          this.tempUserList = JSON.parse(JSON.stringify(this.brandList));
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    async initUser() {
      const res = await getUserList({ page: 1, pageSize: -1 });
      if (res.code === 200) {
        this.userList = res.data.records;
        this.tempUserList = JSON.parse(JSON.stringify(this.userList));
      } else {
        this.$message.error(res.msg);
      }
    },
    async queryUserEmail() {
      const res = await queryUserEmail();
      if (res.code === 200) {
        this.userEmailList = res.data;
        this.tempUserEmailList = JSON.parse(JSON.stringify(this.userEmailList));
      } else {
        this.$message.error(res.msg);
      }
    }
  },
  created() {
    this.getUserInfoByToken();
    this.getPageInfo();
    this.getRoleInfo();
    this.getVendorList();
    this.initUser();
    this.queryUserEmail();
  }
};
</script>

<style lang="scss">
// .confirm-button-class {
//   color: black;
//   background-color: transparent;
//   border: 1px solid #ffba88;
// }

// .confirm-button-class :hover {
//   color: black;
//   background-color: transparent;
//   border: 1px solid #ffba88;
// }

// .cancel-button-class {
//   color: black;
//   background: #ffba88;
//   border: 1px solid #ffba88;
//   -webkit-box-sizing: border-box;
//   box-sizing: border-box;
//   outline: 0;
//   -webkit-transition: 0.1s;
//   transition: 0.1s;
//   font-weight: 500;
// }
</style>

<style scoped>
.jst_main {
  /* height: 100%; */
  background: #fffdf4;
  padding: 15px;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.jst_content {
  flex: 1;
  overflow-y: auto;
}

.jst_head {
  width: 100%;
  /* height: 100%; */
  background: #fffdf4;
}
.jst-filter {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.add-filter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 0 10px 10px;
}
.filter-tags {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.show-title {
  font-size: 26px;
  color: #333333;
  font-style: italic;
}
.show-des {
  font-size: 13px;
  color: #727272;
}
.daterange .el-date-editor {
  width: 240px;
  height: 34px;
  border-radius: 10px;
  box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.2);
}
.search {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.search .el-input {
  margin: 5px 0 0 20px;
  overflow: hidden;
  border-radius: 10px;
  height: 34px;
  line-height: 34px;
  box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.2);
}
/deep/ .el-dialog {
  border-radius: 20px;
}
/deep/ .search .el-input__inner {
  border: none;
}
.filter-btns {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 6px;
  margin-right: 30px;
}
.filter-btns .btn-item {
  color: #666;
  font-size: 11px;
  margin: 0 10px;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.2);
}
.filter-btns .btn-active {
  background: #ffba88;
}
.jst_content {
  width: 100%;
  /* height: 100%; */
  background: #fffdf4;
}
.jst_content .Add {
  color: #666666;
  background: #ffba88;
  border: 1px solid #ffba88;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  -webkit-transition: 0.1s;
  transition: 0.1s;
  font-weight: 500;
  padding: 8px 20px;
  font-size: 14px;
  border-radius: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.designer-active {
  background-color: #ffba88;
  border-radius: 4px;
}
.dialog-content {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.dialog-content .filter-item {
  cursor: pointer;
  border-radius: 8px;
  padding: 0 10px;
}
.dialog-content .filter-active {
  background: #ffba88;
}
.dialog-content .left-list {
  width: 200px;
  height: 50vh;
  border-right: 1px solid #f1f1f1;
  padding-right: 15px;
}
.role-input {
  display: flex;
  justify-content: center;
  align-items: center;
}
.role-input span {
  margin-left: 8px;
  cursor: pointer;
}
.role-input span i {
  color: #ffba88;
  font-size: 18px;
}
.dialog-content .right-info {
  width: 340px;
  margin-left: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.designer-list {
  height: calc(50vh - 50px);
  overflow-y: auto;
  /* width: 320px;
  padding-right: 10px; */
}
.dialog-content .right-info .designer-item {
  cursor: pointer;
  padding-left: 13px;
}
.editNum {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}
/deep/ .dialog-content .right-info .el-input__inner {
  border: none;
  background: #ffba88;
}
/deep/ .dialog-content .right-info .filter-search .el-input__inner {
  background-color: transparent !important;
}
/deep/ .dialog-content .right-info .el-input__inner::placeholder {
  color: #333333;
}
/deep/
  .dialog-content
  .right-info
  .filter-search
  .el-input__inner::placeholder {
  color: #999999;
}
.el-tag.el-tag--warning {
  background: #ffba88;
  height: 32px;
  /* 设置标签最大宽度，可根据实际情况调整 */
  max-width: 150px;
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: none;
  color: #666666;
  cursor: pointer; /* 将鼠标指针样式设置为小手 */
}
.el-tag.el-tag--warning span {
  /* 不换行 */
  white-space: nowrap;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 超出部分显示省略号 */
  text-overflow: ellipsis;
  cursor: pointer; /* 将鼠标指针样式设置为小手 */
  /* 动态绑定 title 属性 */
  :title="item.label + ':' + item.labelvalue" ;
}

/* 使用 Vue 的深度选择器，确保样式可以穿透到组件内部 */
.el-tag.el-tag--warning span:hover::after {
  content: attr(title); /* 显示 title 属性的内容 */
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px;
  border-radius: 20px;
  z-index: 1;
  white-space: normal; /* 允许换行 */
  word-wrap: break-word; /* 允许单词内换行 */
}

/* 为 span 元素添加 title 属性，显示完整的文本内容 */
.el-tag.el-tag--warning span {
  title: attr(
    data-original-text
  ); /* 使用 data-original-text 属性作为 title 属性的值 */
}

/* 使用 Vue 的深度选择器，确保样式可以穿透到组件内部 */
.el-tag.el-tag--warning span {
  position: relative; /* 确保子元素的定位是相对于 span 元素的 */
}
/deep/ .el-tag.el-tag--warning .el-tag__close {
  margin-top: 4px;
  color: #666666 !important;
}
/deep/ .caret-wrapper {
  display: none !important;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fffdf4;
}
.el-table {
  padding-bottom: 5px;
}
.el-table,
.el-table__expanded-cell {
  background-color: #fff;
}

/deep/ .el-table__header-wrapper .cell {
  font-size: 12px !important;
}
/* 非斑马纹颜色 */
/deep/ .el-table tr {
  background: #fff;
}

/* 表格的边框设置没有边框 */
/deep/ .el-table td,
.building-top .el-table th.is-leaf {
  border: none;
  /* color: white; */
}

.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #fffdf4;
}

/* 鼠标滑过表格某一行时的颜色 */
/* /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #fffdf4;
} */

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #ffcc7e;
  color: #000;
}

/deep/ .el-pagination.is-background .btn-next,
/deep/ .el-pagination.is-background .btn-prev,
/deep/ .el-pagination.is-background .el-pager li {
  margin: 0 5px;
  background-color: #fff;
  color: #000;
  min-width: 30px;
  border-radius: 4px;
  border: 1px solid #b2b8c2;
}
/deep/ .el-table__footer-wrapper tbody td.el-table__cell {
  background-color: #ffffff;
  margin-bottom: 5px;
}
/* 汇总行样式 */
/deep/ .el-table__footer {
  background: #fff;
}

/* 给汇总行的某些中间单元格加边框，例如3和4列 */
/deep/ .el-table__footer td:nth-child(5) .cell {
  background: #ffe298 !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
}
/deep/ .el-table__footer td:nth-child(11) .cell {
  background: #ffe298 !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
}
/deep/ .el-table__footer td:nth-child(12) .cell {
  background: #ffe298 !important;
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  margin: 0 10px;
}
</style>
